<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="lib/vue-2.4.0.js"></script>
</head>
<body>
<div id="app">
    <div>
        <h3>性别</h3>
        <input type="radio" id="male" value="1" v-model="gender">
        <label for="male">男</label>
        <input type="radio" id="female" value="2" v-model="gender">
        <label for="female">女</label>
    </div>
    <div>
        <h3>爱好</h3>
        <input type="checkbox" id="ball" value="1" v-model="hobby">
        <label for="ball">篮球</label>
        <input type="checkbox" id="sing" value="2" v-model="hobby">
        <label for="sing">唱歌</label>
        <input type="checkbox" id="code" value="3" v-model="hobby">
        <label for="code">写代码</label>
    </div>
    <div>
        <h3>职业</h3>
        <select multiple v-model="professional">
            <option value="0">请选择职业</option>
            <option value="1">教师</option>
            <option value="2">IT</option>
            <option value="3">医生</option>
        </select>
    </div>
    <div>
        <textarea v-model="desc" name="" id="" cols="30" rows="10"></textarea>
    </div>
    <div>
        <input @click="handle" type="number" v-model.number="age">
        <input type="text" v-model.trim="age">
        <input type="text" v-model.lazy="msg">
        {{msg}}
    </div>
    <div>
        <input type="text" v-focus>
        <input type="text" v-color="msg">
        <input type="text" v-focus1>
    </div>
</div>
<script>
    Vue.directive('focus',{
        inserted(el){
            //el表示指令所绑定的元素
            el.focus()
        }
    })
    Vue.directive('color',{
        inserted(el,binding){
            console.log(binding.value)
            el.style.backgroundColor=binding.value.color
        }
    })
    var vm=new Vue({
        el:'#app',
        data:{
            gender:2,
            hobby:['2',3],
            professional:[1,2],
            desc:'dsfdsfdsf',
            age:13,
            msg:{
                color:'orange'
            }
        },
        methods:{
            handle(){
                console.log(this.age+13)
            }
        },
        directives:{
            color1:{
                bind(el,binding){
                    el.style.backgroundColor=binding.value.color
                }
            },
            focus1:{
                bind(el){
                    el.focus()
                }
            }
        }
    })
</script>
</body>
</html>
